<!-- 受邀页 -->
<template>
	<view class="container">
		<view class="inner">
			<view class="title">接受邀请</view>
			<view class="form">
				<view class="form-item">
					<view class="title">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d40091c8-3f9e-4d1f-a652-22685a6bb7d5.png"></image>
						<text>姓名</text>
					</view>
					<view class="input">
						<input type="text" placeholder="请输入姓名" v-model="vdata.inviteParams.realName">
					</view>
				</view>
				<view class="form-item">
					<view class="title">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5574a48d-d1f0-4619-8239-5dbabc4528f5.png"></image>
						<text>电话</text>
					</view>
					<view class="input">
						<input type="text" placeholder="请输入手机号" v-model="vdata.inviteParams.phone">
					</view>
				</view>
			</view>
			<button @click="onSubmit" class="submit" plain>接受邀约</button>
		</view>
		
		<!-- <view class="rule">
			<view class="title">拉新政策</view>
			<text>拉新送福分</text>
		</view> -->
		
		<view class="rule">
			<view class="title">携带参数</view>
			<text>{{ vdata.inviteParams }}</text>
		</view>
		
	</view>
	
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	import { $confirmInvite, $fansDetail } from '@/http/apiManager.js'
	import appConfig from  '@/config/appConfig.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	// 登录弹框实例
	const gzLoginPopupRef = ref()
	
	// 数据源
	const vdata = reactive({
		inviteParams: {},	// 邀请携带参数
		isLogin: false,	// 用户的登录状态
	})
	
	onLoad(({ params }) => {
		vdata.isLogin = storageManage.isLogin()	// 更新登录状态
		vdata.inviteParams.userId = storageManage.userId()
		vdata.inviteParams.fansId = storageManage.fansId()
		vdata.inviteParams.inviterUserId = JSON.parse(params).inviterId
		if(vdata.isLogin){	// 如果用户登陆 回填姓名手机号
			getUserDetail(vdata.inviteParams.fansId)
		}
	})
	/**
	 * 拉取用户详情
	 */
	const getUserDetail = (fansId) => {
		if(vdata.isLogin){
			vdata.inviteParams.phone = storageManage.userInfo().phone
			vdata.inviteParams.realName = storageManage.userInfo().realName
		}else{
			$fansDetail().then(({ bizData }) => {
				storageManage.userInfo(bizData)
				vdata.inviteParams.phone = bizData.phone
				vdata.inviteParams.realName = bizData.realName
			})
		}
	}
	
	/**
	 * 登录后回调
	 */
	const isLoginCallback = () => {
		if(vdata.isLogin){	// 如果用户登陆 回填姓名手机号
			vdata.inviteParams.phone = storageManage.userInfo().phone
			vdata.inviteParams.realName = storageManage.userInfo().realName
		}
	}
	
	/**
	 * 接受邀约
	 */
	const onSubmit = () => {
		// 判断用户是否登录
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open()
			return
		}
		if(!vdata.inviteParams.realName){
			$infoBox.toast('请输入姓名')
			return
		}
		if(!vdata.inviteParams.phone || !/^(?:(?:\+|00)86)?1\d{10}$/.test(vdata.inviteParams.phone)){
			$infoBox.toast('请输入正确的手机号')
			return
		}
		getApp().preventActive(()=>{
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			$confirmInvite(vdata.inviteParams).then(({ bizData }) => {
				uni.hideLoading()
				$infoBox.toast('受邀成功',{ duration: 2000 })
				setTimeout(() => {
					// 受邀成功之后 跳转到首页
					uni.switchTab({
						url: `/pages/index/index`
					})
				},2000)
			})
		})
	}
</script>

<style lang="less" scoped>
	.container{
		overflow: hidden;	// 解决子元素margin影响父元素
		width: 100%;
		min-height: 100vh;
		padding: 24rpx;
		box-sizing: border-box;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3b466b43-5f18-412a-a2c8-75d957efefc7.png') no-repeat left top / 100% 600rpx,
					url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/19e5c2e7-fabd-4640-91ea-7d4c897cec88.png') no-repeat left top / 100% 100%;
					
		.inner{
			margin-top: 480rpx;
			padding: 24rpx;
			
			background-color: #ffffe5;
			border-radius: 16rpx;
			
			&>.title{
				width: 428rpx;
				height: 88rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fbbab547-24b3-4957-a082-994f8bfec018.png') no-repeat left top / 100% 100%;
				font-weight: 600;
				font-size: 36rpx;
				color: #683800;
				text-align: center;
				line-height: 88rpx;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				top: -40rpx;
			}
			
			.form{
				.form-item{
					display: flex;
					gap: 60rpx;
					align-items: center;
					background-color: #f0f0c0;
					padding: 24rpx;
					border-radius: 45rpx;
					margin-bottom: 24rpx;
					.title{
						display: flex;
						align-items: center;
						gap: 10rpx;
						image{
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
			.submit{
				border: none;
				background-color: #ff9c28;
				color: #fff;
				border-radius: 45rpx;
			}
		}
		
		.rule{
			margin-top: 24rpx;
			background: linear-gradient(45deg, #cce989, #eae690, #e0ea97);
			padding: 24rpx;
			border-radius: 16rpx;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}
	
	}
</style>